<template>
  <div class="content_box">
    <form class="condition_query">
      <span class="txt">员工</span>
      <el-input class="inline-input" size="medium" v-model="name" clearable placeholder="请输入" />

      <span class="txt">所属组织</span>
      <el-select class="inline-input" size="medium" v-model="depId" clearable placeholder="请选择">
        <el-option v-for="item in organizations" :key="item.depId" :label="item.depName" :value="item.depId" />
      </el-select>

      <span class="txt">标段</span>
      <el-select
        class="inline-input"
        size="medium"
        v-model="bidSection"
        clearable
        placeholder="请选择"
        @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select class="inline-input" size="medium" v-model="areaId" clearable placeholder="请选择">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <el-button
        type="primary"
        size="medium"
        icon="el-icon-search"
        style="margin-left:40px"
        @click="getDutyuserList()"
      >查询</el-button>
    </form>

    <el-table
      :data="staffInfo"
      tooltip-effect="dark"
      :max-height="tableHeight"
      size="mini"
      style="width: 100%;"
      v-loading="loading"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onStaffDetails(scope.row)">{{scope.row.fullname}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="ID"></el-table-column>
      <el-table-column prop="photo" label="识别照片">
        <template slot-scope="scope">
          <el-image
            class="user_image"
            :src="scope.row.photoUrl"
            fit="cover"
            :preview-src-list="[scope.row.photoUrl]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="depName" label="所属组织"></el-table-column>
      <el-table-column prop="groupName" label="所属班组"></el-table-column>
      <el-table-column prop="bidSectionName" label="标段"></el-table-column>
      <el-table-column prop="workAreaNames" label="所属工区"></el-table-column>
      <el-table-column prop="roleName" label="所属角色"></el-table-column>
      <el-table-column prop="isReg" label="是否考勤">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.isReg == 0" type="danger">否</el-tag>
          <el-tag size="mini" v-else>是</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.userId)">删除</el-button>
          <el-button type="text" size="small" @click="handleBlackList(scope.row)" v-if="scope.row.status==1">加入黑名单</el-button>
          <el-button type="text" size="small" @click="handleBlackList(scope.row)" v-if="scope.row.status==2">移出黑名单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageData="pageData" @pageNum="changPageNum" @pageSize="onChangePageSize" />
  </div>
</template>

<script>
import Pagination from "../Pagination";
import HttpInterface from "../../../util/httpInterface";
import HttpConfig from '../../../util/httpConfig';
import { mapState, mapActions } from "vuex";
import { messageBox } from "../../../util/utils";

export default {
  name: "StaffList",
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      staffInfo: [],
      workAreaInfo: [],
      tableHeight: 200,
      name: "",
      bidSection: "",
      areaId: "",
      depId: "",
      picUrl: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      }
    };
  },

  computed: {
    ...mapState(["biaoduanList", "organizations"])
  },

  created() {
    this.getTableHeight();
  },

  mounted() {
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },

  beforeRouteLeave(to, from, next) {
    window.onresize = null;
    next();
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    getTableHeight() {
      let tableH = 215;
      this.tableHeight = window.innerHeight - tableH;
    },

    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    changPageNum(page) {
      this.pageData.pageNum = Number(page);
      this.getDutyuserList();
    },

    onChangePageSize(size) {
      this.pageData.pageSize = Number(size);
      this.getDutyuserList();
    },

    // 获取人员列表
    getDutyuserList() {
      this.loading = true;
      var _this = this;
      let { pageData, name, depId, bidSection, areaId } = this;
      var params = {
        size: pageData.pageSize,
        page: pageData.pageNum
      };
      if (name) params.name = name;
      if (depId) params.depId = depId;
      if (bidSection) params.bidSection = bidSection;
      if (areaId) params.areaId = areaId;

      HttpInterface.requestPost(this, HttpInterface.URL_DUTYUSER_LIST, params, function(res) {
        var { success, other } = res.data;
        if (success) {
          let { rows, total } = other;
          rows.forEach(item => {
            item.sex = item.title == 1 ? "男" : "女";
            item.photoUrl = HttpConfig.serverUrl + item.photo;
          })
          _this.staffInfo = rows.reverse();
          _this.pageData.total = total;
        } else {
          _this.staffInfo = [];
          _this.pageData.total = 0;
        }
        _this.loading = false;
      });
    },

    handleEdit(row) {
      this.$emit("editStaff", row.userId);
    },

    handleDelete(id) {
      let _this = this;
      messageBox(() => {
        var params = { id };
        HttpInterface.requestGet(this, HttpInterface.URL_DUTYUSER_DELETE, params, function (res) {
          var data = res.data;
          if (data.success) {
            _this.successMessage("删除成功！");
            _this.getDutyuserList();
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null);
      })
    },

    handleBlackList(row) {
      var _this = this;
      var params = {
        userid: row.userId,
        status: row.status == 1 ? 2 : 1
      };
      HttpInterface.requestPost(this, HttpInterface.URL_DUTYUSER_UPDATESTATUS, params, function(res) {
        var { success } = res.data;
        if (success) {
          if (row.status == 2) {
            _this.successMessage("移出黑名单成功");
          } else {
            _this.successMessage("加入黑名单成功");
          }
          _this.getDutyuserList();
        }
      },null,false);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    onStaffDetails(row) {
      this.$emit("staffDetails", row);
    },

    // 改变人员是否在场
    changePresenceInfo(row) {
      let _this = this;
      let params = {
        userId: row.userId,
        presence: row.presence == 1 ? 0 : 1
      };
      HttpInterface.requestPost(this, HttpInterface.URL_UPDATE_PRESENCE, params, function (res) {
        let data = res.data;
        if (!data.success) {
          _this.errorMessage('操作失败');
        }
        _this.getDutyuserList();
      }, null, true)
    }
  }
};
</script>

<style  scoped>
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}

/* 图片 */
.user_image{
  width: 30px;
  height: 30px;
  background: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px #cfcfcf;
}

.el-icon-picture-outline{
  font-size: 16px;
  margin-top: 4px;
}
</style>
